<!DOCTYPE html>
<html>
<head>
	<script type="text/javascript" src='./dist/jquery-3.2.1.js'></script>
	<title></title>
</head>
<style type="text/css">
	.img{
		background:#ccc;
		border-radius:25px;
		transform:scale(1.2,1.2);
	}


	.d1,.d2{
		height:300px;
		background:#ccc;
		width:100%;

	}
</style>
<body>


<h1>属性选择器知识点</h1>
<br>


<h3>1.属性  2.CSS类</h3>
<img src="logo.jpg">



<h3>3.HTML代码</h3>
	<div class="d1"><img src="logo.jpg"></div>
	<button>ok</button>
	<div class="d2"></div>



<h3>4.值</h3>
	<p><input type="text" name=""></p>
	<button>ok</button>
	<p><input type="text" name=""></p>
</body>
<script type="text/javascript">
//属性选择器

//1.属性
	$('img').click(function(){
		// $(this).attr({'src':'2.png'});
		alert($(this).attr('src'));
	})


//2.CSS类
//添加类名
	$('img').mouseenter(function(){
		$(this).addClass('img');
	})
	$('img').mouseleave(function(){
		$(this).removeClass('img');
	})
		$('img').mouseenter(function(){
		$(this).toggleClass('img');
	})
	$('img').mouseleave(function(){
		$(this).toggleClass('img');
	})


//3.HTML代码
//获取图片
	$('button').click(function(){
		val=$('.d1').html();
		$('.d2').html(val);
	})

//4.值
//获取输入框里的值
	$('button').click(function(){
		val=$('input').eq(0).val();
		$('input').eq(1).val(val);
	});
</script>
</html>